<section class="content-section-column">
  <p>Selection: {{ selection?.length ? selection[0].label : 'none' }}</p>

  <div class="tree-container">
    <lv-group lvGutter="8px">
      <i lv-icon="lv-icon-create" lvColorState="true" lv-tooltip="add" (click)="add()"></i>
      <i lv-icon="icon-delete" lvColorState="true" lv-tooltip="delete" (click)="delete()"></i>
      <i lv-icon="icon-edit" lvColorState="true" lv-tooltip="update" (click)="update()"></i>
      <i lv-icon="lv-icon-refresh" lvColorState="true" lv-tooltip="refresh" (click)="refresh()"></i>
    </lv-group>
    <lv-search (lvSearch)="lvTree.filter({ filterMode: 'contains', key: 'label', value: $event })"></lv-search>

    <lv-tree [lvData]="data" #lvTree lvSelectionMode="single" [(lvSelection)]="selection" [lvNodeTemplate]="nodeTpl"></lv-tree>
  </div>
</section>

<ng-template #nodeTpl let-item>
  <ng-container *ngIf="item.isEdit; else defaultNodeTpl">
    <input
      lv-input
      [ngModel]="item.label"
      (click)="$event.stopPropagation()"
      (keydown.enter)="updateSave(item, $event)"
      (blur)="updateSave(item, $event)"
    />
  </ng-container>
  <ng-template #defaultNodeTpl>
    <div lv-overflow lvTooltipPosition="right">{{ item.label }}</div>
  </ng-template>
</ng-template>
